<script>
import {login, register} from "@/api/login";

export default {
  name: 'login',
  data() {
    return {
      // 0用户名，1邮箱登录
      loginType: 0,
      //0 注册，1登录
      status: 1,

      loginInfo: {
        username: '',
        password: '',
        email: ''
      },

      registerInfo: {
        nickname: '',
        email: '',
        password: '',
        confirmPassword: ''
      },
    }
  },
  methods: {
    /**
     * 切换登录方式
     */
    checkLoginType() {
      //单击按钮，如果当前是用户名登录0-》1  如果是邮箱1-》0
      this.loginType = this.loginType === 0 ? 1 : 0
    },

    /**
     * 登录或注册选择
     */
    registerOrLogin() {
      this.status = this.status === 0 ? 1 : 0
      console.log(this.status)
    },

    /**
     * 用户登录
     */
    login() {
      //获取登录信息
      const data = this.loginInfo
      data.loginType = this.loginType

      //用户名和密码登录
      if (this.loginType === 0) {
        //判断是否有用户名
        if (data.username === '') {
          return this.$customMessage('用户名不能为空', 'warning')
        }
      } else {
        //邮箱和密码登录，判断是否有邮箱
        if (data.email === '') {
          return this.$customMessage('邮箱不能为空', 'warning')
        }

        //判断邮箱格式是否正确
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
          return this.$customMessage('邮箱格式错误', 'error')
        }
      }

      //判断是否有密码
      if (data.password === '') {
        return this.$customMessage('密码不能为空', 'warning')
      }

      //发起登录请求
      login(data).then((res => {
        const data = res.data.data;
        //提示登录成功
        this.$customMessage('登录成功', 'success')
        //存储本地用户信息
        this.$store.commit('user/setUserInfo', data)
        //跳转首页
        this.$router.replace('/layout')
      })).catch(err => {
        const message = err.response?.data?.msg || "登录失败，请稍后再试"
        this.$customMessage(message, 'error')
      })
    },


    /**
     * 用户注册
     */
    register() {
      console.log(111)
      const data = this.registerInfo
      console.log(this.registerInfo)

      //判断是否有用户名
      if (data.nickname === '') {
        console.log(222)
        return this.$customMessage('昵称不能为空', 'warning')
      }
      //判断是否有邮箱
      if (data.email === '') {
        return this.$customMessage('邮箱不能为空', 'warning')
      }
      //判断是否密码
      if (data.password === '') {
        return this.$customMessage('密码不能为空', 'warning')
      }
      //判断邮箱是否合法
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
        return this.$customMessage('邮箱格式错误', 'warning')
      }
      //判断密码是否一致
      if (data.confirmPassword !== data.password) {
        return this.$customMessage('两次密码输入不一致', 'warning')
      }

      //表单验证成功，发起请求
      register(data).then(res => {
        const data = res.data.data;
        //提示登录成功
        this.$customMessage('注册成功，请登录', 'success')
        //返回登录
        this.status = 1

      }).catch(err => {
        this.$customMessage('注册失败，请联系管理员', 'error')
      })
    },

  },
  mounted() {
    console.log(this)
  },
}

</script>

<template>
  <div class="wrapper">
    <div class="container">
      <h1 v-if="status">欢迎登录</h1>
      <h1 v-else>欢迎注册</h1>
      <!-- 登录表单 -->
      <div id="loginForm" class="form-container" v-show="status === 1">
        <!-- 切换用户名/邮箱登录方式 -->
        <div class="switch-login-method">
          <button @click="checkLoginType" v-if="loginType">使用账号登录</button>
          <button @click="checkLoginType" v-else>使用邮箱登录</button>
        </div>
        <form id="login">
          <div class="input-group" id="usernameGroup" v-if="loginType===0">
            <input type="text" name="username" placeholder="用户名" v-model="loginInfo.username">
          </div>
          <div class="input-group" id="emailGroup" v-else>
            <input type="email" placeholder="邮箱" name="=email" v-model="loginInfo.email">
          </div>
          <div class="input-group">
            <input type="password" placeholder="密码" name="password" v-model="loginInfo.password">
          </div>
          <button type="submit" @click.prevent="login">登录</button>
        </form>
        <div class="toggle-form">
          <p>还没有账号？<a id="showRegister" @click="registerOrLogin">立即注册</a></p>
        </div>
      </div>

      <!-- 注册表单 -->
      <div id="registerForm" class="form-container" v-show="status === 0">
        <form id="register">
          <div class="input-group" id="usernameGroup">
            <input type="text" name="nickname" placeholder="昵称" v-model="registerInfo.nickname">
          </div>
          <div class="input-group" id="emailGroup">
            <input type="text" placeholder="邮箱" name="=email" v-model="registerInfo.email">
          </div>
          <div class="input-group">
            <input type="password" placeholder="密码" name="password" v-model="registerInfo.password">
          </div>
          <div class="input-group">
            <input type="password" placeholder="确认密码" name="confirmPassword" v-model="registerInfo.confirmPassword">
          </div>
          <button type="submit" @click.prevent="register">注册</button>
        </form>
        <div class="toggle-form">
          <p>已有账号？<a id="showLogin" @click="registerOrLogin">立即登录</a></p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(270deg, #3760e6, #0f3bed, #274eb5);
  background-size: 600% 600%;
  animation: gradientShift 15s ease infinite;
  overflow: hidden;
}

body {
  background: transparent;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 右左游动 */
@keyframes float-right {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translate(40px, -20px) rotate(-5deg);
    opacity: 0.5;
  }
  100% {
    transform: translate(0, 0) rotate(2deg);
    opacity: 0.3;
  }
}


/* 登录框容器 */
.container {
  background: #fff;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  width: 400px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-top: 20px;
}

.container:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* 标题 */
h1 {
  text-align: center;
  color: #3873d7;
  font-size: 2.5em;
  margin-bottom: 30px;
}

/* 输入框和标签组 */
.input-group {
  position: relative;
  margin-bottom: 30px;
  transition: transform 0.3s ease;
}

.input-group:focus-within {
  transform: scale(1.02);
}

input {
  width: 100%;
  padding: 15px;
  border: none;
  border-bottom: 2px solid #ddd;
  background: transparent;
  font-size: 16px;
  transition: all 0.3s ease;
}

input:focus {
  outline: none;
  border-bottom-color: #3873d7;
}

label {
  position: absolute;
  left: 15px;
  top: 15px;
  color: #999;
  pointer-events: none;
  transition: all 0.3s ease;
}


/* 按钮 */
button {
  width: 100%;
  padding: 15px;
  background: #3873d7;
  border: none;
  border-radius: 30px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(56, 115, 215, 0.3);
}

/* 登录方式切换 */
.switch-login-method {
  text-align: center;
  margin-bottom: 20px;
}

.switch-login-method button {
  background: none;
  border: none;
  color: #3873d7;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.3s ease;
}

.switch-login-method button:hover {
  text-decoration: underline;
}

/* 底部文字链接 */
.toggle-form {
  text-align: center;
  margin-top: 20px;
}

.toggle-form a {
  color: #3873d7;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.toggle-form a:hover {
  text-decoration: underline;
}

</style>
